<template>
    <div>
        <el-row>
            <el-col :span="6" align="left">
                <span>商品ID：</span>
                <el-input placeholder="请输入商品ID" v-model="giftId" clearable></el-input>
            </el-col>
            <el-col :span="6" align="left">
                <span>商品名称：</span>
                <el-input placeholder="请输入商品名称" v-model="giftName" clearable style="width:50%;"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4" align="left">
                <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="12"></el-col>
            <el-col :span="4" align="right">
                <el-button type="warning" icon="el-icon-setting" @click="typeManage">商品类型管理</el-button>
            </el-col>
            <el-col :span="4" align="right">
                <el-button type="success" icon="el-icon-plus" @click="addGift">新增商品</el-button>
            </el-col>
        </el-row> 
        <el-table
            :data="table"
            v-loading="tableLoading"
            border
          
            size="small"
            height="500"
            :row-class-name="tableRowClassName"
            style="width: 100%;">
            <el-table-column
                fixed="left"
                label="商品类型"
                prop="goodsTypeInfo.typeName"
                align="center"
                width="150">
            </el-table-column>
            <el-table-column
                fixed="left"
                label="商品ID"
                prop="giftId"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column
                fixed="left"
                label="商品名称"
                prop="giftName"
                align="center"
                :show-overflow-tooltip="true"
                width="200">
            </el-table-column> 
            <el-table-column
                label="商品数量"
                prop="goodsNum"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column
                label="商品金额"
                prop="goodsMoney"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column
                label="最多可用积分"
                prop="integral"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column
                label="返佣金额"
                prop="commissionMoney"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column
                label="商品图片"
                prop="giftPic"
                align="center"
                :show-overflow-tooltip="true"
                width="200">
            </el-table-column> 
            <el-table-column
                label="商品内容"
                prop="content"
                align="center"
                :show-overflow-tooltip="true"
                width="200">
            </el-table-column>  
            <el-table-column
                label="兑换次数"
                prop="exchangeNumber"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="每人限购"
                prop="limitNum"
                align="center"
                width="120">
            </el-table-column>  
            <el-table-column
                label="是否自提"
                align="center"
                width="120">
                <template slot-scope="scope">
                    {{scope.row.isPickUpSelf?'是':'否'}}
                </template>
            </el-table-column>
            <el-table-column
                label="是否删除"
                align="center"
                width="120">
                <template slot-scope="scope">
                    {{scope.row.isDelete?'是':'否'}}
                </template>
            </el-table-column>
            <el-table-column
                label="创建时间"
                prop="createdTime"
                align="center"
                width="200">
            </el-table-column>    
            <el-table-column
                label="更新时间"
                prop="updatedTime"
                align="center"
                width="200">
            </el-table-column>          
            <el-table-column
                label="商品排序"
                prop="weight"
                align="center"
                width="100">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="商品状态"
                prop="goodsStatus"
                align="center"
                width="100">
            </el-table-column>  
            <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="300">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" style="padding: 8px;margin: 2px" 
                @click="susbscrib(scope.row)">预约购买管理</el-button>
                <el-button type="warning" size="mini" style="padding: 8px;margin: 2px" 
                @click="edit(scope.row)">修改信息</el-button>
                <el-button style="padding: 8px;margin: 2px" type="danger"
                        size="mini" @click="deleteItem(scope.row)">删除商品
                </el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="totalCount"
            style="margin:50px;">
        </el-pagination>
        <div style="margin:30px 0;" class="fw">共{{Math.ceil(totalCount/pageSize)}}页,{{totalCount}}条信息</div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogShow"
            v-loading="dialogLoading" :close-on-click-modal="false" width="800px"
        >
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>商品名称：</span>
                    <el-input placeholder="请输入名称" v-model="add.giftName" clearable></el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>商品数量：</span>
                    <el-input-number v-model="add.goodsNum" style="width:70%"></el-input-number>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>兑换次数：</span>
                    <el-input-number v-model="add.exchangeNumber" style="width:70%"></el-input-number>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>每人限购：</span>
                    <el-input-number v-model="add.limitNum" style="width:70%"></el-input-number>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="16" >
                    <span>支付模式：</span>
                    <el-switch @change="modelChange1"
                        v-model="payModel1"
                        active-text="积分+金额模式"
                        inactive-text="纯积分模式">
                    </el-switch>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>商品金额：</span>
                    <el-input placeholder="请输入商品金额" v-model="add.goodsMoney" :disabled="add.goodsMoneyDis" clearable type="number"></el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>最多可用积分：</span>
                    <el-input placeholder="请输入商品最多可用积分" v-model="add.integral" clearable type="number"></el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>返佣类型：</span>
                    <el-select v-model="add.commissionType" placeholder="请选择" style="width:70%;">
                        <el-option
                        v-for="item in add.commissionTypeArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span v-if="add.commissionType=='00'">返佣比例（%）：</span>
                    <span v-if="add.commissionType=='01'">返佣金额：</span>
                    <el-input v-if="add.commissionType=='00'" placeholder="请输入返佣比例" v-model="add.commissionMoney" clearable type="number" style="width:65%;"></el-input>
                    <el-input v-if="add.commissionType=='01'" placeholder="请输入返佣金额" v-model="add.commissionMoney" clearable type="number" style="width:65%;"></el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>商品内容：</span>
                    <el-input :rows="2" type="textarea" placeholder="请输入内容" clearable v-model="add.content" style="width:70%"></el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>商品类型：</span>
                    <el-select v-model="add.goodsTypeId" placeholder="请选择商品类型" style="width:70%">
                        <el-option
                        v-for="item in add.goodsTypeArr"
                        :key="item.typeId"
                        :label="item.typeName"
                        :value="item.typeId">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row style="margin-bottom:60px;">
                <el-col :span="3"></el-col>
                <el-col :span="6">商品详情图片地址：</el-col>
                <el-col :span="9">
                    <el-input type="textarea" v-model="add.giftPic" :disabled="true"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-upload class="avatar-uploader" :http-request="uploadSectionFile" :show-file-list="false" action="http://118.89.154.192:8086/appTokenServer">
                    　　<el-button size="small" type="primary" :disabled="uploadLoading" :loading="uploadLoading">点击上传</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-row style="height:100px;" v-if="add.giftPic">
                <el-col :span="6"></el-col>
                <el-col :span="12" align="left">
                    商品详情图片：
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="add.giftPic"
                        >
                    </el-image>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>   
            <el-row style="margin-bottom:60px;">
                <el-col :span="3"></el-col>
                <el-col :span="6">商品列表图片地址：</el-col>
                <el-col :span="9">
                    <el-input type="textarea" v-model="add.smallImage" :disabled="true"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-upload class="avatar-uploader" :http-request="uploadSectionFile2" :show-file-list="false" action="http://118.89.154.192:8086/appTokenServer">
                    　　<el-button size="small" type="primary" :disabled="uploadLoading" :loading="uploadLoading">点击上传</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-row style="height:100px;" v-if="add.smallImage">
                <el-col :span="3"></el-col>
                <el-col :span="6">商品列表图片：</el-col>
                <el-col :span="9" align="left">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="add.smallImage"
                        >
                    </el-image>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>   
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>是否推荐banner：</span>
                    <el-select v-model="add.isRecommendBanner" placeholder="请选择" style="width:60%;">
                        <el-option
                        v-for="item in add.recommendBannerUrlArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row style="margin-bottom:60px;" v-if="add.isRecommendBanner">
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>banner路径：</span>
                    <el-input type="textarea" v-model="add.recommendBannerUrl" :disabled="true" style="width:70%"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-upload class="avatar-uploader" :http-request="uploadSectionFileBanner" :show-file-list="false" action="http://118.89.154.192:8086/appTokenServer">
                    　　<el-button size="small" type="primary" :disabled="uploadLoading" :loading="uploadLoading">点击上传</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-row style="height:100px;" v-if="add.isRecommendBanner">
                <el-col :span="6"></el-col>
                <el-col :span="3">图片预览：</el-col>
                <el-col :span="9" align="left">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="add.recommendBannerUrl"
                        >
                    </el-image>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>   


            <el-row style="height:auto">
                <el-col :span="6"></el-col>
                <el-col :span="3">商品详情：</el-col>
                <el-col :span="15" style="height:auto">
                    <el-upload class="avatar-uploader" :http-request="uploadContentFile" :show-file-list="false" action="http://118.89.154.192:8086/appTokenServer">
                        <el-button id="article-uploader" size="small" type="primary" style="display:none">点击上传</el-button>
                    </el-upload>
                    <div class="ql-container ql-snow">
                        <quill-editor ref="text" v-model="add.giftDetail"
                        class="ql-editor" :options="editorOption"/>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>商品状态：</span>
                    <el-select v-model="add.goodsStatus" placeholder="请选择商品状态" style="width:70%">
                        <el-option
                        v-for="item in add.goodsStatusArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <!-- <el-col :span="12">
                    <span>所需积分：</span>
                    <el-input placeholder="请输入所需积分" type="number" v-model="add.integral" clearable></el-input>
                </el-col> -->
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>是否自提：</span>
                    <el-select v-model="add.isPickUpSelf" placeholder="请选择是否自提" style="width:70%">
                        <el-option
                        v-for="item in add.isPickUpSelfArr"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12">
                    <span>商品排序：</span>
                    <el-input placeholder="请输入商品排序" v-model="add.weight" clearable type="number"></el-input>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12"></el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="sureAdd">确定</el-button>
                    <el-button type="danger" @click="dialogShow=false">取消</el-button>
                </el-col>
            </el-row>
        </el-dialog>
        <el-dialog title="商品类型" :visible.sync="typeShow" :close-on-click-modal="false" width="800px">
            <el-row>
                <el-col :span="2"></el-col>
                <el-col :span="12">
                    <span>商品类型：</span>
                    <el-select v-model="goodsTypeId" placeholder="请选择商品类型" style="width:70%">
                        <el-option
                        v-for="item in add.goodsTypeArr"
                        :key="item.typeId"
                        :label="item.typeName"
                        :value="item.typeId">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="10">
                    <el-button type="primary" @click="editType">修改</el-button>
                    <el-button type="success" @click="addType">新增</el-button>
                    <el-button type="danger" @click="deleteType" :loading="deleteTypeLoading" :disabled="deleteTypeLoading">删除</el-button>
                </el-col>
            </el-row>
            <el-dialog append-to-body title="修改商品类型" :visible.sync="edittypeShow" :close-on-click-modal="false" width="800px">
                <el-row>
                    <el-col :span="6"></el-col>
                    <el-col :span="12">
                        <span>类型名称：</span>
                        <el-input placeholder="请输入类型名称" v-model="typeName" clearable style="width:50%;"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="success" @click="sureEditType" :loading="deleteTypeLoading" :disabled="deleteTypeLoading">确定</el-button>
                    </el-col>
                </el-row>
            </el-dialog>
            <el-dialog append-to-body title="新增商品类型" :visible.sync="addtypeShow" :close-on-click-modal="false" width="800px">
                <el-row>
                    <el-col :span="6"></el-col>
                    <el-col :span="12">
                        <span>类型名称：</span>
                        <el-input placeholder="请输入类型名称" v-model="typeName" clearable style="width:50%;"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="success" @click="sureAddType" :loading="deleteTypeLoading" :disabled="deleteTypeLoading">确定</el-button>
                    </el-col>
                </el-row>
            </el-dialog>
        </el-dialog>
        <el-dialog title="预约购买管理" :visible.sync="subscribShow" :close-on-click-modal="false" width="800px">
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="16">
                    <span>商品预约购买时间：</span>
                    <el-date-picker
                      style="width:70%;"
                      v-model="goodsSubscribetime"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd HH:mm:ss" 
                    >
                    </el-date-picker>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="16">
                    <span>商品预约购买数量：</span>
                    <el-input-number style="width:70%;" v-model="goodsSubscribNum" label="商品预约购买数量"></el-input-number>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="16" align="left">
                    <span>支付模式：</span>
                    <el-switch @change="modelChange2"
                        v-model="payModel2"
                        active-text="积分+金额模式"
                        inactive-text="纯积分模式">
                    </el-switch>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="16">
                    <span>商品预约购买价格：</span>
                    <el-input style="width:70%;" v-model="goodsSubscribMoney" placeholder="商品预约购买价格" :disabled="goodsSubscribMoneyDis"></el-input>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="16">
                    <span>商品预约购买最多可用积分：</span>
                    <el-input style="width:50%;" v-model="goodsSubscribIntegral" placeholder="商品预约购买最多可用积分"></el-input>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4"></el-col>
                <el-col :span="16">
                    <span>是否开启：</span>
                    <el-select v-model="isOpen" placeholder="请选择" style="width:80%;">
                        <el-option
                        v-for="item in isOpenArr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="6"></el-col>
                <el-col :span="12"></el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="sureSubscrib">确定</el-button>
                    <el-button type="danger" @click="subscribShow=false">取消</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
let OSS = require('ali-oss');
let client = new OSS({
  region: 'oss-cn-shanghai',
  //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
  accessKeyId: 'LTAIoM90JOn4aEwU',
  accessKeySecret: 'OATKi5mcguNP3O4psil8uEuBT3a7kk',
  bucket: 'maitianyun',
  
});
// 工具栏配置
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"],     // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'],                  // 引用  代码块
    [{'header': 1}, {'header': 2}],                // 1、2 级标题
    [{'list': 'ordered'}, {'list': 'bullet'}],     // 有序、无序列表
    // [{ script: "sub" }, { script: "super" }],   // 上标/下标
    [{'indent': '-1'}, {'indent': '+1'}],          // 缩进
    [{'direction': 'rtl'}],                        // 文本方向
    [{'size': ['small', false, 'large', 'huge']}], // 字体大小
    [{'header': [1, 2, 3, 4, 5, 6, false]}],       //标题
    [{'color': []}, {'background': []}],           // 字体颜色、字体背景颜色
    [{'font': []}],                                //字体种类                    
    [{'align': []}],                               //对齐方式
    ['image'],                                     // 链接link、图片、视频video
    ['clean']                                      // 清除文本格式
]
let quill;
var searchInfo={
    giftId:"",
    giftName:"",
};
var goodsTypeArr=[];
var goodsId="";
export default {
    data(){
        return{
            dialogTitle:"",
            giftId:"",
            giftName:"",
            goodsTypeId:"",
            typeName:"",
            deleteTypeLoading:false,
            tableLoading:false,
            table:[],
            currentPage: 1,
            pageSize: 20,
            totalCount: 0,
            dialogShow:false,
            dialogLoading:false,
            uploadLoading:false,
            typeShow:false,
            addtypeShow:false,
            edittypeShow:false,
            subscribShow:false,
            goodsSubscribetime:[],
            goodsSubscribNum:"",
            goodsSubscribMoney:"",
            goodsSubscribMoneyDis:false,
            goodsSubscribIntegral:"",
            isOpen:true,
            isOpenArr:[
                {
                    value:true,
                    label:'开启'
                },
                {
                    value:false,
                    label:'关闭'
                }
            ],
            add:{
                giftId:"",
                giftName:"",
                giftPic:"",
                smallImage:"",
                isRecommendBanner:false,
                recommendBannerUrl:"",
                content:"",
                integral:"",
                giftDetail:"",
                goodsMoney:"",
                goodsMoneyDis:false,
                integral:"",
                commissionMoney:"",
                goodsStatus:"上架",
                goodsNum:"",
                exchangeNumber:"",
                limitNum:"",
                goodsTypeId:"",
                commissionType:"01",
                weight:"",
                isPickUpSelf:false,
                isPickUpSelfArr:[
                    {
                        value:true,
                        label:'自提'
                    },
                    {
                        value:false,
                        label:'不自提'
                    },
                ],
                goodsStatusArr:[
                    {
                        value:'上架',
                        label:'上架'
                    },
                    {
                        value:'下架',
                        label:'下架'
                    },
                ],
                commissionTypeArr:[
                    {
                        value:'00',
                        label:'按比例返佣'
                    },
                    {
                        value:'01',
                        label:'按金额返佣'
                    },
                ],
                recommendBannerUrlArr:[
                    {
                        value:true,
                        label:'是'
                    },
                    {
                        value:false,
                        label:'否'
                    }
                ],  
                goodsTypeArr:[],
            },
            editorOption: {                
                modules: {
                    toolbar: {
                        container: toolbarOptions,  // 工具栏
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    // 调用自定义图片上传
                                    //等于点击上传按钮被点击
                                    document.querySelector('#article-uploader').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            },
            payModel1:true,
            payModel2:true,
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        requestInfo(){
            this.tableLoading=true;
            this.postRequest("/api/background/gift/gift_mg", {
                giftId:this.giftId,
                giftName:this.giftName, 
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            })
            .then(resp => {  
                this.tableLoading=false;
                if (resp && resp.data.status == 200){
                    this.table=resp.data.obj.rows;
                    this.totalCount = resp.data.obj.total;
                    searchInfo={
                        giftId:this.giftId,
                        giftName:this.giftName,
                    }
                }
            });  
        },
        getGoodsTypeArr(){
            this.postRequest("/api/background/goods/select_type",{}).then(resp => {
                if (resp && resp.data.status == 200){
                    this.add.goodsTypeArr = resp.data.obj;
                    goodsTypeArr=resp.data.obj;
                }
            })
        },
        initData(){
          this.requestInfo()
          this.getGoodsTypeArr()
        },
        search(){
            this.currentPage = 1;
            this.requestInfo()
        },
        //列表当前页改变
        currentChange: function(currentChange) {
            this.currentPage = currentChange;
            this.requestInfo()
        },
        typeManage(){
            this.typeShow=true;
        },
        addGift(){
            this.dialogShow=true;
            this.payModel1=true;
            this.dialogTitle='新增商品';
            this.giftInfoInit()
        },
        sureAdd(){
            if(this.common.isNull(this.add.giftName)){
                this.common.showToast('info','请填写商品名称')
            }else if(this.common.isNull(this.add.goodsMoney) || this.add.goodsMoney<0 || (this.add.goodsMoney==0 && this.payModel1)){
                this.common.showToast('info','请正确填写商品金额')
            }else{
                this.dialogLoading=true;
                console.log(this.add)
                this.add.goodsMoney = this.add.goodsMoney || 0;
                this.postRequest("/api/background/gift/edit_gift_info",{
                    giftId:this.add.giftId,
                    giftName:this.add.giftName,
                    giftPic:this.add.giftPic,
                    smallImage:this.add.smallImage,
                    isRecommendBanner:this.add.isRecommendBanner,
                    recommendBannerUrl:this.add.recommendBannerUrl,
                    content:this.add.content,
                    goodsNum:this.add.goodsNum,
                    exchangeNumber:this.add.exchangeNumber,
                    limitNum:this.add.limitNum,
                    goodsMoney:this.add.goodsMoney,
                    integral:this.add.integral,
                    commissionType:this.add.commissionType,
                    commissionMoney:this.add.commissionMoney,
                    goodsStatus:this.add.goodsStatus,
                    goodsTypeId:this.add.goodsTypeId,
                    isPickUpSelf:this.add.isPickUpSelf,
                    giftDetail:this.add.giftDetail,
                    weight:this.add.weight,
                }).then(resp=>{
                    this.dialogLoading=false;
                    if(resp && resp.data.status == 200){
                        this.dialogShow=false;
                        this.giftInfoInit();
                        this.common.showToast('success','修改成功')
                        this.requestInfo()
                    }
                })
            } 
        },
        susbscrib(item){
            console.log(item)
            this.subscribShow=true;
            this.getRequest("/api/background/goods/query_subscribe?goodsId="+item.giftId).then(resp=>{
                if (resp && resp.data.status == 200) {
                    goodsId=item.giftId;
                    if(resp.data.obj){
                        this.goodsSubscribMoney=resp.data.obj.goodsSubscribMoney;
                        this.goodsSubscribIntegral=resp.data.obj.goodsSubscribIntegral;
                        this.goodsSubscribNum=resp.data.obj.goodsSubscribNum;
                        this.isOpen=resp.data.obj.isOpen;
                        this.goodsSubscribetime=[resp.data.obj.goodsSubscribeStarttime,resp.data.obj.goodsSubscribeEndtime]
                    }else{
                        this.goodsSubscribMoney="";
                        this.goodsSubscribIntegral="";
                        this.goodsSubscribNum="";
                        this.isOpen=true;
                        this.goodsSubscribetime=[]
                    }
                }
            })
        },
        sureSubscrib(){
            let goodsSubscribeStarttime="";
            let goodsSubscribeEndtime="";
            this.goodsSubscribMoney =this.goodsSubscribMoney || 0;
            if(this.goodsSubscribetime){
                goodsSubscribeStarttime = this.goodsSubscribetime[0];
                goodsSubscribeEndtime = this.goodsSubscribetime[1];
            }
            if(this.goodsSubscribMoney==0 && this.payModel2){
                this.common.showToast('info','积分+金额模式下金额不能为0')
            }else{
                this.getRequest("/api/background/goods/save_update_subscribe?goodsId="+goodsId+"&&goodsSubscribeStarttime="+goodsSubscribeStarttime+"&&goodsSubscribeEndtime="+goodsSubscribeEndtime+"&&goodsSubscribNum="+this.goodsSubscribNum+"&&goodsSubscribMoney="+this.goodsSubscribMoney+"&&goodsSubscribIntegral="+this.goodsSubscribIntegral+"&&isOpen="+this.isOpen).then(resp=>{
                    if (resp && resp.data.status == 200) {
                        this.common.showToast("success",resp.data.msg);
                        this.subscribShow=false;
                        this.initData()
                    }
                })
            }
        },
        edit(item){
            this.dialogShow=true;
            this.payModel1=true;
            this.dialogTitle='修改商品';
            this.dialogLoading=true;
            this.postRequest("/api/background/gift/gift_info_by_id",{
                giftId:item.giftId
            }).then(resp=>{
                this.dialogLoading=false;
                if(resp && resp.data.status == 200){
                    this.add=resp.data.obj;
                    this.add.isPickUpSelfArr=[
                        {
                            value:true,
                            label:'自提'
                        },
                        {
                            value:false,
                            label:'不自提'
                        },
                    ]
                    this.add.goodsStatusArr=[
                        {
                            value:'上架',
                            label:'上架'
                        },
                        {
                            value:'下架',
                            label:'下架'
                        },
                    ]
                    this.add.commissionTypeArr=[
                        {
                            value:'00',
                            label:'按比例返佣'
                        },
                        {
                            value:'01',
                            label:'按金额返佣'
                        },
                    ],
                    this.add.recommendBannerUrlArr=[
                        {
                            value:true,
                            label:'是'
                        },
                        {
                            value:false,
                            label:'否'
                        }
                    ],  
                    this.add.goodsTypeArr=goodsTypeArr;
                }
            })
        },
        addType(){
            this.addtypeShow=true;
        },
        editType(){
            if(this.goodsTypeId==""){
                this.common.showToast("info", "请选择类型名称"); 
                return false;
            }
            this.edittypeShow=true;
        },
        sureEditType(){
            if(this.typeName==""){
               this.common.showToast("info", "请输入类型名称"); 
               return false;
            }
            this.deleteTypeLoading = true;
            this.putRequest("/api/background/goods/update_type", {
                typeId:this.goodsTypeId,
                typeName: this.typeName,
                }).then(resp => {
                this.deleteTypeLoading = false;
                if (resp && resp.data.status == 200) {
                    this.common.showToast("success", resp.data.msg);
                    this.edittypeShow = false;
                    this.initData();
                }
            });
        },
        sureAddType(){
            if(this.typeName==""){
               this.common.showToast("info", "请输入类型名称"); 
               return false;
            }
            this.deleteTypeLoading = true;
            this.putRequest("/api/background/goods/save_type", {
                typeName: this.typeName,
                }).then(resp => {
                this.deleteTypeLoading = false;
                if (resp && resp.data.status == 200) {
                    this.common.showToast("success", resp.data.msg);
                    this.addtypeShow = false;
                    this.initData();
                }
            });
        },
        deleteType(){
            if(this.goodsTypeId==""){
                this.common.showToast("info", "请选择需要删除的商品类型");
                return false;
            }
            this.$confirm("此操作将删除该商品类型, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
            this.deleteTypeLoading=true;
            this.deleteRequest("/api/background/goods/remove_type?typeId="+this.goodsTypeId).then(resp => {
                this.deleteTypeLoading=false;
                if (resp && resp.data.status == 200) {
                    this.common.showToast("success", resp.data.msg);
                    this.goodsTypeId="";
                    this.initData();
                }
            });
            })
            .catch(() => {});
        },
        deleteItem(item){
            this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
            .then(() => {
            this.tableLoading=true;
            this.deleteRequest("/api/background/gift/delete_gift?giftId="+item.giftId).then(resp => {
                this.tableLoading=false;
                if (resp && resp.data.status == 200) {
                    this.common.showToast("success", resp.data.msg);
                    this.initData();
                }
            });
            })
            .catch(() => {});
        },
        giftInfoInit(){
            this.add={
                giftId:"",
                giftName:"",
                giftPic:"",
                smallImage:"",
                isRecommendBanner:false,
                recommendBannerUrl:"",
                content:"",
                integral:"",
                giftDetail:"",
                goodsMoney:"",
                goodsMoneyDis:false,
                integral:"",
                commissionMoney:"",
                goodsNum:"",
                exchangeNumber:"",
                limitNum:"",
                commissionType:"01",
                goodsTypeId:"",
                weight:"",
                goodsStatus:"上架",
                isPickUpSelf:false,
                isPickUpSelfArr:[
                    {
                        value:true,
                        label:'自提'
                    },
                    {
                        value:false,
                        label:'不自提'
                    },
                ],
                goodsStatusArr:[
                    {
                        value:'上架',
                        label:'上架'
                    },
                    {
                        value:'下架',
                        label:'下架'
                    },
                ],
                commissionTypeArr:[
                    {
                        value:'00',
                        label:'按比例返佣'
                    },
                    {
                        value:'01',
                        label:'按金额返佣'
                    },
                ],
                recommendBannerUrlArr:[
                    {
                        value:true,
                        label:'是'
                    },
                    {
                        value:false,
                        label:'否'
                    }
                ],
                goodsTypeArr:goodsTypeArr,
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt10M = file.size / 1024 / 1024 < 10;

            if (!isJPG) {
                this.common.showToast('warning','只能上传图片')
            }
            if (!isLt10M) {
            this.$message.error('上传图片大小不能超过 10MB!');
            }
            return isJPG && isLt10M;
        },
        timestamp(){
            var time = new Date();
            var y = time.getFullYear();
            var m = time.getMonth()+1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            return ""+y+this.add0(m)+this.add0(d)+this.add0(h)+this.add0(mm)+this.add0(s);
        },
        add0(m){
            return m<10?'0'+m : m;
        },
        //上传图片
        uploadSectionFile(e){
            var file=e.file;
            if((file.type).indexOf("image")==-1){
                this.common.showToast("warning","只能上传图片")
            }else{
                this.uploadLoading=true;
                var value = file.name;
                var suffix = value.substr(value.indexOf("."));
                var storeAs = "image/"+this.timestamp()+suffix;
                console.log(file.name + ' => ' + storeAs);
                client.put(storeAs, file).then(r1 =>{
                    console.log(r1);
                    this.uploadLoading=false;
                    if(r1.res && r1.res.statusCode==200){
                        this.add.giftPic=r1.url;
                        // return client.get(storeAs);
                    }else{
                        this.common.showToast("warning","上传失败")   
                    }  
                }).then(function (r2) {
                    console.log(r2);
                }).catch(function (err) {
                    console.error(err);
                    this.uploadLoading=false;
                    this.common.showToast("warning","上传失败")
                });
            }
        },
        uploadSectionFile2(e){
            var file=e.file;
            if((file.type).indexOf("image")==-1){
                this.common.showToast("warning","只能上传图片")
            }else{
                this.uploadLoading=true;
                var value = file.name;
                var suffix = value.substr(value.indexOf("."));
                var storeAs = "image/"+this.timestamp()+suffix;
                console.log(file.name + ' => ' + storeAs);
                client.put(storeAs, file).then(r1 =>{
                    console.log(r1);
                    this.uploadLoading=false;
                    if(r1.res && r1.res.statusCode==200){
                        this.add.smallImage=r1.url;
                        // return client.get(storeAs);
                    }else{
                        this.common.showToast("warning","上传失败")   
                    }  
                }).then(function (r2) {
                    console.log(r2);
                }).catch(function (err) {
                    console.error(err);
                    this.uploadLoading=false;
                    this.common.showToast("warning","上传失败")
                });
            }
        },
        uploadSectionFileBanner(e){
            var file=e.file;
            if((file.type).indexOf("image")==-1){
                this.common.showToast("warning","只能上传图片")
            }else{
                this.uploadLoading=true;
                var value = file.name;
                var suffix = value.substr(value.indexOf("."));
                var storeAs = "image/"+this.timestamp()+suffix;
                console.log(file.name + ' => ' + storeAs);
                client.put(storeAs, file).then(r1 =>{
                    console.log(r1);
                    this.uploadLoading=false;
                    if(r1.res && r1.res.statusCode==200){
                        this.add.recommendBannerUrl=r1.url;
                        // return client.get(storeAs);
                    }else{
                        this.common.showToast("warning","上传失败")   
                    }  
                }).then(function (r2) {
                    console.log(r2);
                }).catch(function (err) {
                    console.error(err);
                    this.uploadLoading=false;
                    this.common.showToast("warning","上传失败")
                });
            }
        },
        //富文本框上传图片
        uploadContentFile(e){
            var file=e.file;
           if((file.type).indexOf("image")==-1){
                this.common.showToast("warning","只能上传图片")
           }else{
                this.dialogLoading=true;
                var value = file.name;
                var suffix = value.substr(value.indexOf("."));
                var storeAs = "image/"+this.timestamp()+suffix;
                console.log(file.name + ' => ' + storeAs);
                client.put(storeAs, file).then(r1 =>{
                    console.log(r1);
                    if(r1.res && r1.res.statusCode==200){
                        // return client.get(storeAs);
                        // 获取富文本组件实例
                        quill = this.$refs.text.quill;
                        // 获取整个富文本长度
                        let length = quill.getLength();
                        // 获取整个富文本文子长度
                        // let textLength=quill.getText().length;
                        //获取当前所选择的下标
                        let selectIndex=quill.getSelection().index
                        // 插入图片
                        quill.insertEmbed(selectIndex, 'image', r1.url);
                        // 调整光标到最后
                        // quill.setSelection(length +1);
                        this.dialogLoading=false;
                    }else{
                        this.dialogLoading=false;
                        this.common.showToast("warning","上传失败")   
                    }  
                }).then(function (r2) {
                    // console.log(r2);
                }).catch(function (err) {
                    console.error(err);
                    this.uploadLoading=false;
                    this.common.showToast("warning","上传失败")
                });       
           }       
        },
        modelChange1(e){
            //纯积分模式
            if(e==false){
                this.add.goodsMoney='0';
                this.add.goodsMoneyDis=true;
            }else{
                this.add.goodsMoneyDis=false;
            }
        },
        modelChange2(e){
            //纯积分模式
            if(e==false){
                this.goodsSubscribMoney='0';
                this.goodsSubscribMoneyDis=true;
            }else{
                this.goodsSubscribMoneyDis=false;
            }
        },
        tableRowClassName({row, rowIndex}) {
            if (row.goodsStatus === '上架') {
            return 'successRow';
            } else if(row.goodsStatus === '下架'){
            return 'warningRow';
            }
            return '';
        }
    }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 30px;
  height: 50px;
  line-height: 50px;
}
.el-col {
  height: 50px;
  line-height: 50px;
}
.el-input{
    width: 70%;
}
.ql-snow.ql-toolbar{
    position: absolute !important;
    background-color: #fff !important;
    z-index: 2 !important;
    top: 0;
}
.ql-editor{
    height: 300px;
    overflow-y: scroll;
}
.ivu-upload {
    display: none;
}
/deep/ .warningRow {
    background-color: #EBEEF5;
}

/deep/ .successRow {
    background-color: #f0f9eb;
}
</style>
